<template>
	<view class="">
		<view class="content">
			<view class="top-view">
				<div class="conts">
					<image :src="detail.picture" mode="aspectFill" class="img12" @click="ClickImage(detail.picture)">
					</image>
					<div class="font-conts">
						<div class="title">{{ detail.name }}</div>
						<view class="contents address" v-if="adds && adds !== null">
							距您{{ parseFloat(adds).toFixed(2) || '--' }}km
						</view>
						<!-- <div class="time">{{ detail.description }}</div> -->
						<!-- <view class="time">
							{{ detail.province  }}-{{detail.city}}
						</view>
						<view class="time">
							{{ detail.level }}
						</view> -->
						<!-- <view class="titls-cont title-instroduction" v-html="detail.introduction"></view> -->
						<view class="titls-cont myy-title-cont">
							<view class="left">
								已售{{seeDetaiIfos.sell}} / 评论{{seeDetaiIfos.appraise}}
							</view>

							<view class="right">
								<div style="margin-left: -55rpx;" @click="goScenicDetail">简介</div>
								<!-- <img src="../../static/img/more-icon.png" alt="" class="img"> -->
								<div class="img">&gt;</div>
							</view>
						</view>

						<!-- <zy-load mode='fullCircle' size="7" style="height: 36rpx;" v-if="listLoading"></zy-load> -->
						<div>
							<!-- <div class="btn btn1" v-if="list.length == 0">{{ '暂停售票'  }}</div> -->
							<div>
								<div class="btn" v-if="detail.status == 1">{{ '售票中'  }}</div>
								<div class="btn" v-else-if="detail.status == 2">{{ '下架'  }}</div>
								<div class="btn" v-else-if="detail.status == 6">{{ '删除'  }}</div>
							</div>
						</div>


					</div>
				</div>
				<div class="btns">
					<!-- 选中加类名 active -->
					<div class="left-btn" @click="colectScencis" v-if="!colect">收藏</div>
					<!-- colect -->
					<div class="left-btn left-btn-active" @click="cancelcolectScencis" v-else>收藏</div>
					<u-button id="shareBtn" class="right-btn" open-type="share">分享</u-button>

				</div>
			</view>

			<view class="my-msg">
				<view class="money">
					<view>￥{{ parseFloat(detail.price / 100).toFixed(2) }}
						{{ detail.price1 ? ( '-' + parseFloat(detail.price1 / 100).toFixed(2)) : '' }}
					</view>
					<u-rate active-color="#FFD100" size="32" :current="detail.score" :disabled="true">
					</u-rate>
				</view>
				<view class="location">

					<view class="text-box">
						<view class="title">{{detail.name}}</view>
						<view class="cont">{{detail.address}}</view>
					</view>
					<view class="img-box">
						<image src="../../static/newImgs/loa.png" mode="aspectFill" class="img13"
							@click="openMap(detail.address)"></image>
						<image src="../../static/newImgs/tel-icon.png" mode="aspectFill" class="img14"
							@click="phone(detail.telephone)"></image>
					</view>
				</view>
				<div class="mp-list">
					<!-- <u-loading-icon mode="circle" text="圆型"></u-loading-icon> -->
					<view class="" style="text-align: center;padding-left: 290rpx;padding-top: 30rpx"
						v-if="listLoading">
						<zy-load mode='fullCircle' style="margin: 0 auto;"></zy-load>
					</view>
					<div v-for="(item, index) in list" :key="index" v-else>
						<div class="row-box">
							<div class="left-msg">
								<div class="name">{{item.uutitle}}</div>
								<!-- 1-上架，2-下架，6-删除 -->
								<div class="mpname">
									<span>
										<span v-if="item.uustatus == 1">{{ '售票中' }}</span>
										<span v-if="item.uustatus == 2">{{ '下架' }}</span>
										<span v-if="item.uustatus == 6">{{ '删除' }}</span>
									</span>
									<span style="margin-left: 16rpx">
										<span v-if="item.uurefund_rule == 2">{{ '不可退' }}</span>
										<span v-if="item.uurefund_rule == 3">{{ '随时退' }}</span>
										<span v-if="item.uurefund_rule == -1">{{ '不可退且是可提现' }}</span>
									</span>
								</div>

								<div class="detail">购买须知：{{item.uunotes}}</div>
							</div>
							<div class="right-btn" v-if="!item.uutprice">{{'--'}}</div>
							<div class="right-btn" v-else>¥ {{parseFloat(item.uutprice / 100).toFixed(2) || 0}}</div>
						</div>
						<!-- 此时看不见门票信息 -->
						<div class="btn" @click="goRouter(item)">预定</div>
					</div>
				</div>

				<view class="msges">
					<view class="titls">
						<view class="before"></view>注意事项
					</view>
					<view class="titls-cont" v-html="detail.announcements"></view>
					<!-- <view class="titls">演出详情</view>
					<view class="titls-cont">xxxx</view> -->
				</view>

				<view class="rate-box" v-if="rateList.length > 0">
					<view class="rate-title">
						<view class="left">
							<view class="titls">
								<view class="before"></view>评价 ({{rateList.length}})
							</view>

						</view>
						<view class="right" @click="goRate()">
							<span>全部显示</span><span class="gt" style="margin-left: 4rpx;">&gt;</span>
						</view>
					</view>
					<view class="item" v-for="(item, index) in rateList" :key="index">
						<view class="name">
							<view class="left">{{ item.userNickName }}</view>
							<view class="time">{{ item.commentDate || ''}}</view>
						</view>
						<view class="content">{{ item.comment }}</view>
						<view class="img-box">
							<view class="my-img" v-if="item.commentImage && item.commentImage !== ''">
								<img :src="itemss" alt="" v-for="(itemss, indexs) in item.commentImage.split(',')"
									:key="indexs" class="my-img"
									@click="previewImage(item.commentImage.split(',')[indexs])"
									style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; ">
							</view>
							<view class="my-img" v-if="item.commentVideo && item.commentVideo !== '' ">
								<!-- <video :src="items"  mode=""
									style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; " v-for="(items, indexs) in item.commentVideo.split(',')" :key="indexs"></video> -->
								<video :src="item" mode="" objectFit="cover"
									style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; "
									v-for="(item, index) in item.commentVideo.split(',')" :key="index"
									:show-play-btn="false" :show-fullscreen-btn="false"></video>
							</view>
						</view>
						<view class="rate-bbox">
							<u-rate active-color="#FFD100" size="32" :current="item.rating" :disabled="true">
							</u-rate>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Map from '../../js_sdk/ms-openMap/openMap.js'
	import zyLoad from '@/uni_modules/zy-loading/components/zy-loading/zy-loading.vue'
	// 
	export default {
		components: {
			zyLoad
		},
		data() {
			return {
				adds: '',
				colect: false,
				seeDetaiIfos: {
					appraise: 0,
					sell: 0
				},
				detail: {},
				listLoading: false,
				list: [],
				params: {},
				rateList: [
					// {
					// 	name: '用户123123',
					// 	rate: 10,
					// 	content: '111111',
					// 	imageList: [{}, {}, {}],
					// 	time: '2024-01-26',
					// },
					// {
					// 	name: '用户123123',
					// 	rate: 10,
					// 	content: '11111111123123123',
					// 	imageList: [{}, {}, {}],
					// 	time: '2024-01-26',
					// },
					// {
					// 	name: '用户123123',
					// 	rate: 10,
					// 	content: '11111111123123123213XXXX',
					// 	imageList: [{}, {}, {}],
					// 	time: '2024-01-26',
					// }
				],
				myAdds: {}
			}
		},
		onLoad(params) {
			// // console.log('aaaaaaaaaaaaaaa')
			// // console.log(1111111, params)
			this.params = params;
			this.getAddress();

		},

		onShow() {
			this.getAddress();
			if (!this.params.share) {
				this.searchDetail(this.params)
			} else {
				setTimeout(() => {
					_this.searchDetail(this.params)
				}, 10)
				return;
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// console.log(loginRes)
						// return;
						// 在这里处理登录成功后的逻辑，如获取用户信息等  
						_this.$http({
							url: _this.$myApi.xcxLogin,
							method: 'POST',
							hideLoading: true,
							data: {
								"xcxCode": loginRes.code,
								"clientId": "25e5f3649dded6a3345ef8ee6359cda0",
								"grantType": "xcx",
								"appid": "wx767edd216cfa44e2"
							},
							success: res => {

								// // console.log('是否显示----------', res)
								uni.setStorage({
									key: 'isLoginShow',
									data: res.data,
									success: function() {}
								});
								uni.removeStorageSync('openId');
								// 存取token
								uni.setStorageSync('token', 'Bearer ' + res.data
									.access_token)
								uni.setStorageSync('clientID', res.data
									.client_id)
								uni.setStorageSync('openId', res.data)
								// let _this = this;
								if (res.code == 200) {
									setTimeout(() => {
										_this.searchDetail(this.params)
									}, 10)
								}

							},
							fail: err => {

							},
							complete: e => {}
						})
					},
				})
			}


		},

		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			// const value = uni.getStorageSync('userInfo');
			// console.log(this.detail.id, 'this.detail.id')
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log('来自页面内分享按钮', res.target)
			}
			return {
				title: '嗨皮趣',
				imageUrl: this.videoDate.poster,
				path: `/pages/myHomeDetail/index?id=${this.detail.id}&share=${true}`
			}
		},
		// #endif
		onShareTimeline: function(res) {
			return {
				title: '嗨皮趣', //字符串  自定义标题
				query: 'id=1', //页面携带参数
				path: `/pages/myHomeDetail/index?id=${this.detail.id}&share=${true}`,
				imageUrl: 'https://mp.weixin.qq.com/wxopen/basicprofile?action=get_headimg&token=460767183&t=1708653259573' //图片地址
			}
		},
		methods: {
			// 图片预览
			previewImage(image, image1) {
				// console.log(image,image1, '预览图片中')
				uni.previewImage({
					current: 0, // 当前显示图片的链接/索引值
					urls: [image], // 需要预览的图片链接列表，photoList要求必须是数组
					loop: true // 是否可循环预览
				});
			},
			// 去景区简介
			goScenicDetail() {
				uni.navigateTo({
					url: '/pages/myHomeDetail/detail?id=' + this.detail.id
				})
			},
			// 去评价页面
			goRate() {
				uni.navigateTo({
					url: '/pages/listEvaluate/all?number=' + this.detail.number
				})
			},
			// 查询景区门票 售出 评价情况
			getSpotsInfo() {
				let data = {
					"userId": uni.getStorageSync('openId').userId,
					"scenicSpotsId": this.detail.number
				}
				// this favoritesList
				this.$http({
					url: this.$myApi.seeDetaiIfos + '?scenicSpotsId=' + data.scenicSpotsId,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						if (res.code == 200) {
							this.seeDetaiIfos = res.data;
						}
					},
					fail: err => {
						// console.log(err);
					},
					complete: e => {
						this.status = 'nomore'
					}
				})
			},
			// 获取收藏状态
			getFavoritesState() {
				let data = {
					"userId": uni.getStorageSync('openId').userId,
					"scenicSpotsId": this.detail.number
				}
				// this favoritesList
				this.$http({
					url: this.$myApi.favoritesList + '?customerId=' + data.userId + '&scenicSpotsId=' + data
						.scenicSpotsId,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log('收藏返回的信息----------', res)

						if (res.rows.length > 0) {
							// this.colect = true;
							if (res.rows.filter(i => i.number == this.detail.number).length > 0) {
								this.colect = true;
							} else {
								this.colect = false;
							}

						} else {
							this.colect = false;
						}
					},
					fail: err => {
						// console.log(err);
					},
					complete: e => {
						this.status = 'nomore'
					}
				})
			},
			// 取消收藏景点
			cancelcolectScencis() {
				let data = {
					"userId": uni.getStorageSync('openId').userId,
					"scenicSpotsId": this.detail.number
				}
				// console.log()

				this.$httpFormData.post(
						this.$myApi.cancelFavoritesList,
						data, {
							header: {
								// 'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
								"Authorization": uni.getStorageSync('token') || 1,
								Clientid: uni.getStorageSync('clientID') || 1
							},
						}
					)
					.then(tes => {
						// // console.log('收藏返回的信息', tes.data);
						if (tes.data.code == 200) {
							uni.showToast({
								title: '取消收藏景点成功！',
								duration: 2000,
								icon: 'none'
							});
							this.getFavoritesState();
						} else {
							uni.showToast({
								title: tes.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}

					})
			},
			// 收藏景点
			colectScencis() {
				// // console.log( uni.getStorageSync('openId'))
				let data = {
					"userId": uni.getStorageSync('openId').userId,
					"scenicSpotsId": this.detail.number
				}
				// console.log()

				this.$httpFormData.post(
						this.$myApi.addFavorites,
						data, {
							header: {
								// 'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
								"Authorization": uni.getStorageSync('token') || 1,
								Clientid: uni.getStorageSync('clientID') || 1
							},
						}
					)
					.then(tes => {
						// // console.log('收藏返回的信息', tes.data);
						if (tes.data.code == 200) {
							uni.showToast({
								title: '收藏景点成功！',
								duration: 2000,
								icon: 'none'
							});
							this.getFavoritesState();

						} else {
							uni.showToast({
								title: tes.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}

					})
					.catch(err => {})
			},
			//点击预览图片
			ClickImage(PhotoAddress) {
				// uni.previewImage({
				//     urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				//     current: '', // 当前显示图片的http链接，默认是第一个
				//     success: function(res) {},
				//     fail: function(res) {},
				//     complete: function(res) {},
				// })
				// this.$preview.open(PhotoAddress)
			},
			searchDetail(params) {

				if (params.number) {
					this.$http({
						url: this.$myApi.scenicList + '?number=' + params.number,
						method: 'GET',
						hideLoading: true,
						data: {},
						success: res => {
							res.data = res.rows[0];
							// // console.log(res)
							res.data.introduction = (res.data.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" '
							)
							this.getAdd(res.data);
							this.detail = res.data;
							
							// 获取收藏状态信息
							this.getFavoritesState();
							// 查询景区售出评价情况
							this.getSpotsInfo();

							// 查询评价列表
							this.getOrderEva();

							// // console.log(this, this.$httpFormData)
							this.listLoading = true;
							console.log('走到了走到了')
							this.$httpFormData.post(
									this.$myApi.ticketList, {
										uulid: res.data.number,
										// m: ''
									}, {
										header: {
											'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
											"Authorization": uni.getStorageSync('token') || 1,
											Clientid: uni.getStorageSync('clientID') || 1
										},
									}
								)
								.then(tes => {
									console.log('res返回的的点点滴滴多多数据', tes);
									tes.data = tes.rawData.rows;
									// this.content = (json.data.content).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
									this.listLoading = false;
									let arrs = tes.data.sort((a, b) => a.uutprice - b.uutprice)
									if (arrs.length <= 1) {
										this.detail.price = arrs[0].uutprice
										this.detail.price1 = arrs[0].uutprice
									} else {
										this.detail.price = arrs[0].uutprice
										this.detail.price1 = arrs[arrs.length - 1].uutprice
									}
									this.list = tes.data;
									console.log(this.list, 1111111)
								})
								.catch(err => {
									console.log(err)
									this.listLoading = false;
								})
						},
						fail: err => {
							// // console.log(err)					
						}
					});
				} else if (params.id) {
					this.$http({
						url: this.$myApi.scenicSpots + '/' + (params.id || '1762046178057445378'),
						method: 'GET',
						hideLoading: true,
						data: {},
						success: res => {
							res.data.introduction = (res.data.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" '
							)
							this.detail = res.data;
							this.getAdd(this.detail);

							// 
							// 获取收藏状态信息
							this.getFavoritesState();
							// 查询景区售出评价情况
							this.getSpotsInfo();
							// 查询评价
							this.getOrderEva()
							// console.log(this, this.$httpFormData)
							this.listLoading = true;
							this.$httpFormData.post(
									this.$myApi.ticketList, {
										uulid: res.data.number,
										// n: res.data.number,
										// m: ''
									}, {
										header: {
											'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
											"Authorization": uni.getStorageSync('token') || 1,
											Clientid: uni.getStorageSync('clientID') || 1
										},
									}
								)
								.then(tes => {
									// // console.log('res返回的的点点滴滴多多数据', res.data);
									tes.data = tes.rawData.rows;
									// this.content = (json.data.content).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
									this.listLoading = false;
									let arrs = tes.data.sort((a, b) => a.uutprice - b.uutprice)
									if (arrs.length <= 1) {
										this.detail.price = arrs[0].uutprice
									} else {
										this.detail.price = arrs[0].uutprice
										this.detail.price1 = arrs[arrs.length - 1].uutprice
									}
									this.list = tes.data;
									console.log(this.list, 1111111)
								})
								.catch(err => {
									this.listLoading = false;
								})
						},
						fail: err => {
							// // console.log(err)					
						}
					});
				}


			},

			// 获取距离
			getAdd(item) {
					
				try {
					let _this = this;
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							res.location = res.latitude + ',' + res.longitude
							// let ak = '6f5443ecb71639a8c135d88dacd5241b';
							let ak = '';
							// ak = 'GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos';
							var url =
								`https://api.map.baidu.com/reverse_geocoding/v3/?ak=6f5443ecb71639a8c135d88dacd5241b&output=json&coordtype=wgs84ll&location=${res.location}`;
							_this.$http({
								url: url,
								method: 'GET',
								hideLoading: true,
								data: {},
								success: res => {
									if (res.status == 0) {
										_this.myAdds = res;
										
									}
								},
								fail: err => {},
								complete: e => {
									console.log(_this.detail.position.split(',')[1], _this.detail.position.split(',')[0], _this.myAdds.result.location.lat, _this.myAdds.result.location.lng)
									_this.adds =  _this.calculateDistance(_this.detail.position.split(',')[1], _this.detail.position.split(',')[0], _this.myAdds.result.location.lat, _this.myAdds.result.location.lng)
								}
							})
						},
						fail: function(res) {
							console.log('失败', res)
						}
					});
				} catch(e) {
					console.log(e, '出现错误了')
				}
				
			},
			calculateDistance(lat1, lon1, lat2, lon2) {
				const R = 6371; // 地球半径，单位：千米  
				const dLat = this.deg2rad(lat2 - lat1); // deg2rad below  
				const dLon = this.deg2rad(lon2 - lon1);
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const d = R * c; // 距离，单位：千米  
				return d;
			},
			deg2rad(deg) {
				return deg * (Math.PI / 180)
			},

			// 获取定位
			getAddress() {
				// console.log('获取地址信息')
				// http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderReverse&location=39.983424,116.322987&output=json&pois=1
				
			},

			// 查看评价列表
			getOrderEva() {
				this.$http({
					url: this.$myApi.seeAppraiseList + '?scenicSpotsId=' + this.detail.number,
					method: 'GET',
					hideLoading: true,
					// data: data,
					success: res => {
						if (res.code == 200) {
							this.rateList = res.rows.slice(0, 3);
							// console.log(this.rateList, '评价列表')
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: err => {
						uni.showToast({
							title: err.msg,
							duration: 2000,
							icon: 'none'
						});
					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
			},
			//分享
			share() {
				// console.log('App点击分享-----------------', )
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: '',
					title: '',
					miniProgram: {
						id: 'gh_55af37f30d9b',
						path: `/pages/myHomeDetail/index?userId=${value.id}&id=${this.id}`
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: ret => {
						// console.log(JSON.stringify(ret));
					},
					fail: (err) => {
						// console.log('分享失败--------------', err)
					}
				});
				// #endif
			},
			// 去支付 传参 参数先不写了
			goRouter(item) {
				console.log(item)
				item.number = this.detail.number;
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/payIndex/index?data=' + data
				})
			},
			// 打电话
			phone(tel) {
				const phoneNumber = tel; // 要拨打的电话号码
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
				});
			},
			// 打开地图
			openMap(add) {
				// 123.47388,41.732544
				// let ak = '6f5443ecb71639a8c135d88dacd5241b';
				let ak = 'OyOqBu2JFcLX6uZt8XGxwnPdvBltwgAw';
				var url = `https://api.map.baidu.com/geocoding/v3/?address=${add}&output=json&ak=${ak}`;
				this.$http({
					url: url,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// // console.log('地址信息----------', res, res.location)
						let data = res;
						// // console.log(data)
						Map.openMap(res.result.location.lat, res.result.location.lng, add, 'wgs84')

					},
					fail: err => {
						// console.log(err);
					},
					complete: e => {
						this.status = 'nomore'
					}
				})

			},
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep {
		#shareBtn .u-btn--default {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FFFFFF !important;
			border-radius: 0px !important;
			width: 240rpx;
			height: 58rpx;
			background-color: #636363 !important;
			text-align: center;
			line-height: 58rpx;
			cursor: pointer;
			user-select: none;
			position: relative;
			border: none !important;
			border-color: transparent !important;

			&::after {
				border: none !important;
			}
		}
	}

	.content {
		width: 690rpx;
		margin: 0 auto;

		.my-msg {
			height: 100%;
			width: 690rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 15rpx;
			background: #FFFFFF;
			padding: 28rpx 27rpx 20rpx 26rpx;
			padding-bottom: 68rpx;

			.msges {
				.titls {
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #1C1C1C;
					padding-left: 6rpx;
					position: relative;
					margin-top: 60rpx;

					.before {
						display: block;
						position: absolute;
						width: 2rpx;
						height: 30rpx;
						background-color: #FF3300;
						top: 8rpx;
						left: 0rpx;

					}
				}

				.titls-cont {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #232323;
					line-height: 42rpx;
					margin-top: 14rpx;
				}
			}

			.mp-list {
				>view {
					border-bottom: 1rpx solid #DBDBDB;

					.btn {
						width: 130rpx;
						height: 58rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						background-color: #0DBA5A;
						line-height: 58rpx;
						text-align: center;
						margin-bottom: 26rpx;
						cursor: pointer;
						user-select: none;
						margin-left: 500rpx;

					}

					.row-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 22rpx 24rpx 20rpx 10rpx;
						position: relative;

						.right-btn {

							font-size: 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							color: #FF6F00;
							display: flex;
							align-items: center;
							position: absolute;
							right: 14rpx;
							top: 62rpx;


						}

						.detail {
							width: 620rpx;
							font-size: 22rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #393939;
							line-height: 24rpx;
							// white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.mpname {
							font-size: 22rpx;
							font-family: PingFang SC, PingFang SC;
							// font-weight: bold;
							color: #212121;
							margin-bottom: 20rpx;
						}

						.name {
							// height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							margin-bottom: 18rpx;
							color: #1C1C1C;

						}
					}
				}
			}

			.location {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #DBDBDB;

				.text-box {
					.title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #212121;
						margin-bottom: 22rpx;
						margin-top: 14rpx;


					}

					.cont {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #212121;
						margin-bottom: 12rpx;
					}
				}

				.img-box {
					display: flex;
					align-items: center;

					.img13,
					.img14 {
						width: 52rpx;
						height: 52rpx;
					}

					.img13 {
						margin-right: 23rpx;
					}
				}

			}

			.money {
				border-bottom: 1rpx solid #DBDBDB;
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
				color: #FF6F00;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}
		}

		.top-view {
			width: 690rpx;
			// height: 357rpx;
			background: #3D3D3D;
			border-radius: 0px 0px 0rpx 0px;
			padding-bottom: 20rpx;

			.btns {
				display: flex;
				flex-direction: row;
				padding-left: 51rpx;
				padding-right: 51rpx;
				justify-content: space-between;

				.left-btn,
				.right-btn {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					width: 240rpx;
					height: 58rpx;
					background-color: #636363;
					text-align: center;
					line-height: 58rpx;
					cursor: pointer;
					user-select: none;
					position: relative;
					// border-radius: 10rpx;

					&:active {
						// background-color: #FF8000;
					}

					&.active {
						background-color: #FF8000;
					}

					&.left-btn-active {
						background-color: #FF8000;
						color: #fff;
					}
				}
			}

			.conts {
				padding: 20rpx 51rpx 25rpx 41rpx;
				display: flex;
				flex-direction: row;

				.font-conts {
					color: #fff;
					width: 380rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.title-instroduction {
						// font-size: 24rpx;
						// font-family: PingFang SC, PingFang SC;
						// font-weight: 500;
						// color: #FFFFFF;
						// // margin-top: 22rpx;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// height: 120rpx;
						// display: -webkit-box;
						//   -webkit-line-clamp: 4; /* 控制显示行数 */  
						//   -webkit-box-orient: vertical;  
						//   overflow: hidden;  
						//   text-overflow: ellipsis;  
						//   word-wrap: break-word; /* 防止内容被强制折行 */  
						height: 118rpx !important;
						margin-top: -2rpx;
						display: -webkit-box;
						-webkit-line-clamp: 4 !important;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.time {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						// margin-top: 22rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.btn {
						color: #FF3400;
						padding: 8rpx 14rpx;
						width: fit-content;
						border: 1rpx solid #FF3400;
						zoom: 0.8;
						// margin-top: 20rpx;
					}
				}

				.img12 {
					width: 184rpx;
					height: 230rpx;
					background: #CACACA;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 40rpx;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		// background-color: #0DBA5A;
		display: flex;
		flex-direction: row;
		height: 96rpx;

		.left {
			width: 106rpx;
			height: 96rpx;
			background-color: #676767;
			text-align: center;
			color: #fff;

			.img1 {
				width: 50rpx;
				height: 50rpx;
				margin-top: 10rpx;
			}

			view {
				height: 30rpx;
				line-height: 30rpx;
				font-size: 22rpx;
				position: relative;
				top: -8rpx;
			}
		}

		.right {
			text-align: center;
			width: 644rpx;
			background-color: #0DBA5A;
			color: #fff;
			font-size: 30rpx;
			line-height: 96rpx;
		}
	}

	.rate-box {
		width: 690rpx;

		border-radius: 10rpx;
		opacity: 1;
		margin-left: 0rpx;
		// margin-top: 10rpx;
		padding-bottom: 24rpx;
		margin-left: -26rpx;
		margin-top: 30rpx;

		.titls {
			height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #1C1C1C;
			padding-left: 6rpx;
			position: relative;
			// margin-top: 60rpx;

			.before {
				display: block;
				position: absolute;
				width: 2rpx;
				height: 30rpx;
				background-color: #FF3300;
				top: 8rpx;
				left: 0rpx;

			}
		}

		.rate-title {
			display: flex;
			flex-direction: row;
			width: calc(100% - 45rpx);
			justify-content: space-between;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #1C1C1C;
			margin: 20rpx 27rpx 0rpx 26rpx;
			padding-bottom: 4rpx;
			border-bottom: 1rpx solid #DBDBDB;

			.gt {
				display: inline-block;
				margin-left: 12rpx;
				transform: scale(1, 1.6);
				position: relative;
				margin-left: 8rpx !important;
				top: -2rpx;
				color: #333;
				;
			}
		}

		.item {

			margin-bottom: 20rpx;
			position: relative;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 22rpx 0rpx 42rpx 0rpx;
			margin-left: 26rpx;
			margin-right: 27rpx;
			border-bottom: 1rpx solid #DBDBDB;

			.content {
				width: 100% !important;
			}

			.rate-bbox {
				position: absolute;
				right: 7rpx;
				bottom: 2rpx;
			}

			.time {
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #4C4C4C;
				// width: 100%;
				text-align: right;
				margin-top: 4rpx;
			}

			.img-box {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 10rpx;

				// margin-bottom: 20rpx;
				.my-img {
					width: 160rpx;
					height: 110rpx;
					border-radius: 10rpx;
					// border: 1rpx solid #ccc;
					margin-right: 12rpx;
				}
			}

			.content {
				margin-top: 10rpx;
				line-height: 32rpx;
				font-size: 22rpx;
				color: #232323;
				// height: 90rpx !important;
				// margin-top: -8rpx;
				// display: -webkit-box;  
				//   -webkit-line-clamp: 3 !important; /* 控制显示行数 */  
				//   -webkit-box-orient: vertical;  
				//   overflow: hidden;  
				//   text-overflow: ellipsis;  
				//   word-wrap: break-word; /* 防止内容被强制折行 */  
			}

			.name {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC;
				// font-weight: bold;
				color: #1C1C1C;
				height: 42rpx;
				line-height: 42rpx;
			}
		}
	}

	.myy-title-cont {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 22rpx;

		.right {
			display: flex;
			flex-direction: row;
			cursor: pointer;
			user-select: none;
		}

		.img {
			width: 12rpx;
			height: 22rpx;
			transform: scale(1, 1.6);
			margin-left: 6rpx;
			margin-top: -3rpx;
		}
	}


	/* 灰色 */
	$zy-dark-grey: #999999;

	.container {
		margin: 0 20rpx;
	}

	.text {
		padding: 30rpx 0;
		font-size: 26rpx;
		color: $zy-dark-grey;
	}
</style>
<style>
	page {
		background: #EFEFEF;
	}
</style>